<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-container">
			<input v-model="searchText" class="search-input" placeholder="请输入搜索关键词" @input="onSearch" />
			<button class="clear-button" @click="onCancel">清空</button>
		</view>

		<!-- 已选标签 -->
		<view>
			<text class="section-title">已选标签</text>
			<view v-if="activeIds.length === 0" class="empty-message" style="padding: 8px 0;">暂无已选标签</view>
			<view class="tag-container">
				<up-tag v-for="tag in activeIds" :key="tag" type="primary" size="mini" :closable="true"
					@close="doClose(tag)" style="margin: 4px;">
					{{ tag }}
				</up-tag>
			</view>
		</view>

		<!-- 标签分类 -->
		<view>
			<text class="section-title">选择标签</text>
			<view v-for="(category, index) in tagList" :key="index" class="category-container">
				<!-- 分组标题 -->
				<view class="category-header" @click="toggleCategory(index)">
					<text>{{ category.text }}</text>
					<view class="category-icon">
						<text>{{ expandedCategories[index] ? "▲" : "▼" }}</text>
					</view>
				</view>

				<!-- 分组内容 -->
				<view v-if="expandedCategories[index]" class="tag-container scrollable-container">
					<!-- 标签 -->
					<up-tag v-for="(tag, tagIndex) in category.children" :key="`${categoryIndex}-${tagIndex}`"
						type="default" size="mini" :plain="!activeIds.includes(tag.id)" :style="{
    backgroundColor: activeIds.includes(tag.id) ? '#007aff' : '#f5f5f5',
    color: activeIds.includes(tag.id) ? '#fff' : '#333',
  }" @click="toggleTag(tag.id)" style="margin: 4px;">
						<text>{{ tag.text }}</text>
					</up-tag>
				</view>
			</view>
		</view>

		<!-- 搜索按钮 -->
		<up-button type="primary" text="搜索" class="search-button" @click="doSearchResult"></up-button>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import myAxios from "@/plugins/myAxios"; // 请求封装模块

	// 用于存储从后端获取的标签数据
	const tagList = ref([]);
	const originalTagList = ref([]); // 用于存储原始标签列表
	const searchText = ref("");
	const activeIds = ref([]);
	const expandedCategories = ref([]);

	// 页面加载时请求标签数据
	onLoad(async () => {
		try {
			const response = await myAxios.get('/user/tags'); // 请求后端接口
			// const mockResponse = {
			// 	code: 0,
			// 	message: "成功",
			// 	data: [
			// 		"科技",
			// 		"教育",
			// 		"娱乐",
			// 		"健康",
			// 		"旅游",
			// 		"艺术",
			// 		"音乐",
			// 		"电影",
			// 		"阅读",
			// 		"阅读1",
			// 	]
			// };
			// const response = mockResponse; // 这里是模拟的后端数据
			if (response.code === 0) {
				const filteredData = response.data
					.map(item => item.trim()) // 去除首尾空格
					.filter(item => item !== ''); // 过滤空字符串
				// 将获取到的标签数据转换为适合的格式
				tagList.value = [{
					text: "选择标签",
					children: filteredData.map(tag => ({
						text: tag,
						id: tag
					})) // 转换为对象数组
				}];
				originalTagList.value = JSON.parse(JSON.stringify(tagList.value)); // 保存原始标签列表
				expandedCategories.value = tagList.value.map(() => true); // 默认展开所有类别
			} else {
				uni.showToast({
					title: response.message || '获取标签失败',
					icon: 'none',
				});
			}
			// 原始标签列表
			const originTagList = [{
					text: "性别",
					children: [{
							text: "男",
							id: "男"
						},
						{
							text: "女",
							id: "女"
						},
					],
				},
				{
					text: "学院",
					children: [{
							text: "智能科技学院",
							id: "智能科技学院"
						},
						{
							text: "汽车工程学院",
							id: "汽车工程学院"
						},
						{
							text: "商学院",
							id: "商学院"
						},
						{
							text: "人文学院",
							id: "人文学院"
						},
						{
							text: "盛宝金融科技学院",
							id: "盛宝金融科技学院"
						},
						{
							text: "艺术设计学院",
							id: "艺术设计学院"
						},
						{
							text: "体育与健康学院",
							id: "体育与健康学院"
						},
						{
							text: "吉利科技航空航天学院",
							id: "吉利科技航空航天学院"
						},
						{
							text: "博雅学院",
							id: "博雅学院"
						},
						{
							text: "创新创业学院",
							id: "创新创业学院"
						},
						{
							text: "外国语言与文化学院",
							id: "外国语言与文化学院"
						},
						{
							text: "马克思主义学院",
							id: "马克思主义学院"
						},
					],
				},
				{
					text: "专业",
					children: [{
							text: "计算机科学与技术",
							id: "计算机科学与技术"
						},
						{
							text: "网络工程",
							id: "网络工程"
						},
						{
							text: "数据科学与大数据",
							id: "数据科学与大数据"
						},
						{
							text: "虚拟现实技术",
							id: "虚拟现实技术"
						},
						{
							text: "车辆工程",
							id: "车辆工程"
						},
						{
							text: "汽车服务工程",
							id: "汽车服务工程"
						},
						{
							text: "机器设计制造及其自动化",
							id: "机器设计制造及其自动化"
						},
						{
							text: "新能源汽车工程",
							id: "新能源汽车工程"
						},
						{
							text: "机器人工程",
							id: "机器人工程"
						},
						{
							text: "智能车辆工程",
							id: "智能车辆工程"
						},
						{
							text: "知识产权",
							id: "知识产权"
						},
						{
							text: "艺术设计学",
							id: "艺术设计学"
						},
						{
							text: "数字媒体艺术",
							id: "数字媒体艺术"
						},
						{
							text: "产品设计",
							id: "产品设计"
						},
						{
							text: "环境艺术设计",
							id: "环境艺术设计"
						},
						{
							text: "财务管理",
							id: "财务管理"
						},
						{
							text: "人力资源管理",
							id: "人力资源管理"
						},
						{
							text: "市场营销",
							id: "市场营销"
						},
						{
							text: "审计学",
							id: "审计学"
						},
						{
							text: "管理科学与工程",
							id: "管理科学与工程"
						},
						{
							text: "大数据管理与应用",
							id: "大数据管理与应用"
						},
						{
							text: "物流管理",
							id: "物流管理"
						},
						{
							text: "电子商务",
							id: "电子商务"
						},
						{
							text: "国际经济与贸易",
							id: "国际经济与贸易"
						},
						{
							text: "经济与金融",
							id: "经济与金融"
						},
						{
							text: "金融科技",
							id: "金融科技"
						},
						{
							text: "飞行器控制与信息工程",
							id: "飞行器控制与信息工程"
						},
						{
							text: "飞行器制造工程",
							id: "飞行器制造工程"
						},
						{
							text: "运动康复",
							id: "运动康复"
						},
						{
							text: "体育经济与管理",
							id: "体育经济与管理"
						},
						{
							text: "学前教育",
							id: "学前教育"
						},
						{
							text: "小学教育",
							id: "小学教育"
						},
						{
							text: "表演",
							id: "表演"
						},
						{
							text: "广播电视编导",
							id: "广播电视编导"
						},
						{
							text: "网络与新媒体",
							id: "网络与新媒体"
						},
						{
							text: "动画",
							id: "动画"
						},
						{
							text: "英语",
							id: "英语"
						},
					],
				},
				{
					text: "体育爱好",
					children: [{
							text: "篮球",
							id: "篮球"
						},
						{
							text: "足球",
							id: "足球"
						},
						{
							text: "乒乓球",
							id: "乒乓球"
						},
						{
							text: "羽毛球",
							id: "羽毛球"
						},
						{
							text: "橄榄球",
							id: "橄榄球"
						},
						{
							text: "台球",
							id: "台球"
						},
						{
							text: "跑步",
							id: "跑步"
						},
						{
							text: "滑板",
							id: "滑板"
						},
					],
				},
			];
		} catch (error) {
			console.error('请求失败:', error.message);
			uni.showToast({
				title: '请求失败，请稍后再试',
				icon: 'none',
			});
		}
	});

	// 搜索功能
	const onSearch = () => {
		if (!searchText.value.trim()) {
			// 如果搜索文本为空，恢复原始标签列表
			tagList.value = JSON.parse(JSON.stringify(originalTagList.value));
			expandedCategories.value = tagList.value.map(() => true);
			return;
		}

		const searchLower = searchText.value.trim().toLowerCase();
		const filteredTagList = originalTagList.value.map((category) => {
			const filteredChildren = category.children.filter(item =>
				item.text.toLowerCase().includes(searchLower)
			);
			return {
				...category,
				children: filteredChildren
			};
		}).filter(category => category.children.length > 0); // 只保留有匹配标签的分类

		tagList.value = filteredTagList;
		expandedCategories.value = tagList.value.map(() => true);

		// 判断是否有匹配的标签，如果没有，显示“暂无匹配标签”
		if (filteredTagList.length === 0) {
			uni.showToast({
				title: '暂无匹配标签',
				icon: 'none'
			});
		}
	};


	// 取消搜索
	const onCancel = () => {
		searchText.value = "";
		tagList.value = JSON.parse(JSON.stringify(originalTagList.value)); // 恢复原始标签列表
		expandedCategories.value = tagList.value.map(() => true);
	};

	// 切换标签选中状态
	const toggleTag = (id) => {
		if (activeIds.value.includes(id)) {
			activeIds.value = activeIds.value.filter((item) => item !== id);
		} else {
			activeIds.value.push(id);
		}
	};

	// 切换类别展开状态
	const toggleCategory = (index) => {
		expandedCategories.value[index] = !expandedCategories.value[index];
	};

	// 关闭选中标签
	const doClose = (tag) => {
		activeIds.value = activeIds.value.filter((item) => item !== tag);
	};
	// 执行搜索结果操作
	const doSearchResult = () => {
		uni.navigateTo({
			url: `/pages/searchPage/SearchResultPage?tags=${encodeURIComponent(JSON.stringify(activeIds.value))}`,
		});
	};
</script>


<style scoped>
	.container {
		padding: 16px;
		/* background-color: #f9f9f9; */
	}

	.search-container {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.search-input {
		flex: 1;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 20px;
		font-size: 14px;
		background-color: #fff;
	}

	.clear-button {
		margin-left: 8px;
		background: transparent;
		border: none;
		color: #007aff;
		font-size: 14px;
		cursor: pointer;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin: 16px 0 8px;
	}

	.category-container {
		margin-bottom: 12px;
		background-color: #fff;
		border-radius: 8px;
		padding: 8px 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		font-size: 14px;
		color: #333;
	}

	.category-icon {
		font-size: 12px;
		color: #888;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.scrollable-container {
		max-height: 150px;
		overflow-y: auto;
	}

	.empty-category {
		padding: 12px;
		background-color: #f5f5f5;
		border-radius: 8px;
		text-align: center;
		color: #aaa;
		font-size: 14px;
		margin-top: 8px;
	}

	.search-button {
		margin-top: 16px;
		width: 100%;
		border-radius: 24px;
	}

	.highlight {
		color: #ff5722;
		font-weight: bold;
	}

	/* 新增标签样式 */
	.up-tag {
		background: linear-gradient(135deg, #007aff 0%, #00c6ff 100%);
		/* 渐变背景 */
		color: white;
		/* 字体颜色 */
		border: none;
		/* 去掉边框 */
		border-radius: 20px;
		/* 圆角 */
		padding: 8px 12px;
		/* 内边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		transition: background 0.3s;
		/* 背景变化过渡 */
	}

	.up-tag:hover {
		background: linear-gradient(135deg, #005bb5 0%, #0091cc 100%);
		/* 悬停时的渐变背景 */
	}
</style>